

import React, { Component } from 'react';
import axios from 'axios';
import {create_requestlist_action} from '../store/actionCreator'
import {connect} from 'react-redux'

import {withRouter} from 'react-router-dom'
class Select extends Component {
    constructor(props){
        super(props);
        this.state={
        SelectList:[
          {
              text:"综合",
              index:0
          },
          {
              text:"销量",
              index:1
          },
          {
              text:"新品",
              index:2
          },
          {
              text:"价格",
              index:3
          },
          {
              text:"筛选",
              index:4
          },
      ],
      list:[],
    //   goodList:[
    //       {
    //           id:0,
    //           img:"https://pic.cdfgsanya.com/assets/upload/product/e452c2205610f2612a58ce0534cf5170_400x400.jpg",
    //           name:"水蜜桃",
    //           price:37.2,
    //           saled:24
    //       },{
    //           id:0,
    //           img:"https://pic.cdfgsanya.com/assets/upload/product/78595aab6464e19f0cdcbfe7f15eea85_400x400.jpg",
    //           name:"水蜜桃",
    //           price:12.2,
    //           saled:44
    //       },{
    //           id:0,
    //           img:"https://pic.cdfgsanya.com/assets/upload/product/601/603/225510/228588/228606/270760_1_pic400_6357.JPG",
    //           name:"水蜜桃",
    //           price:7.9,
    //           saled:88
    //       },{
    //           id:0,
    //           img:"https://pic.cdfgsanya.com/assets/upload/product/a5516cfee15fea899ddf506af6cb4a67_400x400.jpg",
    //           name:"水蜜桃",
    //           price:7.21,
    //           saled:94
    //       },
    
    //   ],
            i:0,
        }
    }
    
    componentDidMount(){
        // axios.get("/api/list").then((res)=>{
        //     this.setState({
        //         list: res.data.list
        //     })
        // })
        if(this.props.goodlist.length ==0){
            this.props.requestlist();
        }
    }
    handleClick(index){
      if(index==1){
          this.state.list.sort((a,b)=>{
              return b.saled-a.saled;
          });
      }
      else if(index==3){
          this.state.list.sort((a,b)=>{
              return b.price-a.price;
          })
      }
      this.setState({
          i: index,
          list:this.state.list,
          
      })
    }
    render() {
        return (
            <div className="select">
                <div className="selectList">
                    {
                        this.state.SelectList.map((item,index)=>{
                            return (<span className={this.state.i==index?'active' : '' } onClick={()=>{this.handleClick(index)}}>{item.text}</span>)
                        })
                    }
                </div>
                
                <div className="list">
                    {
                        this.props.goodlist.map((item,index)=>{
                            return (
                                <div onClick={()=>{ this.props.history.push({ pathname:'/aarticulars', state:{ id: item.id } }) }} key={index} className="item">
                                    <img src={item.icon} alt="" />
                                    <p>{item.name}</p>
                                    <p>活动价 ¥ {item.price}</p>
                                    <p>销量 ¥ {item.saled}</p>
                                </div>
                            )
                        })
                    }
                </div>
                {/* <div className="goodList">
                    {
                        this.state.goodList.map((item,index)=>{
                            return(
                                <div key={index} className="good">
                                    <img src={item.img} alt="" />
                                    <p>{item.name}</p>
                                    <p>单价： {item.price}</p>
                                    <p>销量： {item.saled}</p>
                                </div>
                            )
                        })
                    }
                </div> */}
            </div>
        );
    }
}


export default withRouter( connect((state)=>{
    return{
        goodlist:state.goodlist
    }
},(dispatch)=>{
    return{
        requestlist:()=>{
            dispatch(create_requestlist_action())
        }
    }
})(Select));
